<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<link rel="stylesheet" href="./css/element.css">
<script src="./js/vue.js"></script>
<script src="./js/element.js"></script>
<script src="./js/axios.js"></script>
<style>
    * {
        padding: 0;
        margin: 0;
    }

    #app {
        width: 1000px;
        margin: auto;
    }

    header {
        display: flex;
        margin-bottom: 20px;
    }

    .searcount .el-input {
        display: inline-block;
        width: 200px;
    }

    header .el-button {
        margin-left: 20px;
    }
    
</style>

<body>
    <div id="app">
        <!-- 头部 -->
        <header>
            <div class="searcount">
                姓名：
                <el-input v-model="searchval" placeholder="请输入内容"></el-input>
            </div>
            <!-- <el-button type="primary" @click="searcx">搜素</el-button> -->
            <el-button @click="searcx" icon="el-icon-search" circle></el-button>
            <el-button type="primary" @click="add">添加用户</el-button>
            <!-- dialogVisible=true -->
        </header>


        <el-table :data="tableData" style="width: 100%" border>
            <el-table-column align="center" prop="order" label="姓名" width="100">
            </el-table-column>
            <el-table-column align="center" prop="user" label="邮箱">
            </el-table-column>
            <el-table-column align="center" prop="phone" label="电话">
            </el-table-column>
            <el-table-column align="center" prop="orderName" label="角色">
            </el-table-column>
            <el-table-column align="center" prop="money" label="状态">
            </el-table-column>
            <!-- <el-table-column align="center" prop="payTime" label="支付时间" width="200" sortable> -->
            </el-table-column>
            <el-table-column align="center" fixed="right" label="操作" width="200">
                <template slot-scope="scope">
                    <el-button @click="eite(scope.row)" type="primary" icon="el-icon-edit" circle></el-button>
                    <!-- <el-button  type="text" size="small">编辑</el-button> -->
                    <!-- <el-button type="text" size="small" @click="delect(scope.row)">删除</el-button> -->
                    <el-button  @click="delect(scope.row)" type="danger" icon="el-icon-delete" circle></el-button>
                    <el-button type="info" icon="el-icon-s-tools" circle></el-button>   
                </template>
            </el-table-column>
        </el-table>


        <!-- 新建弹框  对话框                                                 :before-close="handleClose"  关闭函数对我们没用-->
        <el-dialog :title="dialogtitle" :visible.sync="dialogVisible" width="30%">


            <el-form ref="form" :model="orderform" label-width="80px">
                <el-form-item label="姓名">
                    <el-input v-model="orderform.order"></el-input>
                </el-form-item>
                <el-form-item label="邮箱">
                    <el-input v-model="orderform.user"></el-input>
                </el-form-item>
                <el-form-item label="电话">
                    <el-input v-model="orderform.phone"></el-input>
                </el-form-item>
                <el-form-item label="角色">
                    <el-input v-model="orderform.orderName"></el-input>
                </el-form-item>
                <el-form-item label="状态">
                    <el-input v-model="orderform.money"></el-input>
                </el-form-item>
                <!-- <el-form-item  label="支付时间">
                    <el-date-picker value-format="yyyy-MM-dd HH:mm:ss" v-model="orderform.payTime" type="date"
                        placeholder="选择日期">
                        value-format="yyyy-MM-dd HH:mm:ss"  时间格式修整成中国版
                    </el-date-picker>
                </el-form-item> -->

            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="save">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</body>

</html>
<script>
    // new vue 就是构造函数  this 指向是实例化出来的对象
    new Vue({
        el: '#app',
        data: {
            searchval: '',    //搜素框双向绑定的值
            tableData: [{     //理解为页面的内容  到时候渲染它就是渲染页面
                order: '123456x',
                user: '王小程',
                phone: '19522404507',
                orderName: '洗浴中心',
                money: '20',
                payTime: '2021-06-16 22:00:41'
            }],
            dialogVisible: false, //控制新建模态框显示、隐藏
            orderform: { //存放表单信息的   就是之前的for 表单
                order: '',
                user: '',
                phone: null,
                orderName: '',
                money: 0,
                payTime: ''
            },
            dialogtitle: '新增信息',//弹框的标题
            updataid: 0, //修改数据的id
            orderFind: {
                search: ''
            }
        },

        created() {   //发起  页面 初始化的请求  渲染
            this.initget();
        },

        methods: {    //这里写所有事件



            initget() {  //封装的渲染 
               
                axios.get('/getlist', { params: this.orderFind }).then(res => {  // ,{params:this.orderfind} 是自己创建的空格子 用来装搜素 的值 
                    // console.log(res);
                    if (res.data.success) {
                        console.log(res);            //如果后端请求正确
                        this.tableData = res.data.list //那么当存放数据的让后端的每一项给赋值.渲染
                    }

                })
            },
           
            add() {  //点击新增按钮的函数
                this.dialogVisible = true;
                this.dialogtitle = '新增信息'
            },
            save() {//新增确定的函数    
                if (this.dialogtitle == '新增信息') {
                    console.log(this.orderform);  //所有的this指向app 让后点  orderform  类似  序列化表单 
                    axios.post('/saveorder', this.orderform).then(res => {
                        // console.log(res);
                        this.dialogVisible = false  //模态框收起
                        if (res.success) {
                            this.$message.success(res.data.msg);  //添加成功弹框

                        } else {
                            this.$message.error(res.data.msg);  //系统自带的提示 要结合msg使用
                        }

                        this.initget()  //保存成功调用请求列表的函数  渲染
                    })
                } else { //修改的逻辑
                    console.log(123);
                    axios.post('/updata', { id: this.updataid, upData: this.orderform }).then(res => {
                        console.log(res);
                        if (res.data.success) {
                            this.dialogVisible = false  //模态框收起
                            this.initget()  //保存成功调用请求列表的函数  渲染   
                        }
                    })
                }
            },
             //val 形参  实参就是  scope.row 直接获取当前这一项 类似当前这一行的值
             eite(val) { //编辑的点击事件
                console.log(val);
                this.dialogVisible = true;
                this.dialogtitle = '修改信息';
                this.updataid = val._id // 编辑的时候从val里面找id传入 删除的时候用的着

                // this.orderform.order=val.order  //一条一条太麻烦了
                for (n in this.orderform) {
                    console.log(n);
                    this.orderform[n] = val[n] //利用for循环 把每一项给赋值
                }
            },
            delect(val) {  //删除的函数
                console.log(val);
                this.$confirm('确定要删除嘛？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    //    固定格式     跟之前一样.就多加个 params
                    axios.get('/delect', { params: { id: val._id } }).then(res => {
                        console.log(res);
                        this.$message.error(res.data.msg);  //提示弹框的
                        this.initget()  //保存成功调用请求列表的函数  渲染
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            searcx() {  //查询的函数
                console.log(this.searchval);
                this.orderFind.search = this.searchval;  //把搜素的内容赋值给前面自己创建的对象.发送到后端
                this.initget()  //保存成功调用请求列表的函数  渲染
            },
        },

    })
</script>